$(function () {
  var layer = layui.layer;
var form = layui.form;//4.4
var laypage = layui.laypage;//7.1  导出laypage 调用render方法渲染页面



// 3.定义梅花时间的过滤器
template.defaults.imports.dataFormat = function (date){//形参
const dt = new Date(date);

var y = dt.getFullYear();
var m = padZero(dt.getMonth()+1);
var d = padZero(dt.getDate());

var hh =padZero(dt.getHours());
var mm =padZero(dt.getMinutes());
var ss =padZero(dt.getSeconds());

return y + '-' + m +'-' + d + ' ' + hh + ':' + mm + ':' + ss;
}


// 3.2定义补零的函数
function padZero(n) {
    return n > 9? n : '0' + n;
}

  //1 定义一个查询的参数对象，为将来请求数据时，将请求参数对象提交到服务器
  var q = {
    pagenum: 1, //页码值，默认请求第一页的数据
    pagesize: 2, //每页显示几条数据，默认每页显示2条
    cate_id: "", //文章分类的id
    state: "", //文章的发布状态
  };




  initTable(); //2.3进入页面先调用获取列表数据的方法
//   4.初始化文章分类的方法
  initCate();
  //2 获取文章列表数据的方法
  function initTable() {
    $.ajax({
      method: "GET",
      url: "/my/article/list",
      data: q,
      success: function (res) {
        if (res.status !== 0) {
          return layer.msg("获取文章列表失败!");
        }
        // console.log(res);
        // 2.2使用模板引擎渲染页面的数据
        var htmlStr = template("tpl-table", res);
        $("tbody").html(htmlStr);

        // 6.2页面数据被渲染完以后 调用渲染分页的方法
        renderPage(res.total); //总数据条数可以在res里找 total 
      },
    });
  }

//   4.初始化文章分类的方法
function initCate(){
$.ajax({
    method: 'GET',
    url:'/my/article/cates',
    success:function(res){
        console.log(res);
if(res.status !== 0){
    return layer.msg('获取分类数据失败!');
}
// 4.2调用模板引擎渲染分类的可选项 拿到里面的内容
var htmlStr = template('tpl-cate',res);
// console.log(htmlStr);
// 4.3通过jQuery选择器拿到select选择框 把内容填充进去
$('[name=cate_id]').html(htmlStr);
// 动态添加的可选项 没有被layui里的js 所监听到 所以页面没有渲染成
// 4.5通知layui 重新渲染表单区域的UI结构
form.render();
    }
})
}

// 绑定submit事件    
// 5.1为筛选表单绑定summit事件
$('form-search').on('submit', function(e){
// 5.2阻止默认行为
e.preventDefault();
// 5.3 获取分类 和  状态选项中的值
var cate_id = $('[name=cate_id]').val();
var state = $('[name=state]').val();
// 5.4筛选完 把内容赋值给 q里的 cate_id 和state
q.cate_id = cate_id;
q.state = state;
// 5.5最后调用initTable()重新渲染表格的数据
initTable();
})

// 分页的页码值=总数据个数/每页显示的数据个数  总数据条数可以在res里找 total  将total传入总数据条数可以在res里找 
// 分页盒子pageBox
// 6.1定义渲染分类的方法
function renderPage(total) {
    // console.log(total);
    // 6.3调用layPage.render 方法来渲染分页的结构
    laypage.render({
elem:'pageBox',//分页器的id
count: total,//总数据条数
limit: q.pagesize,//每页显示几条数据
curr: q.pagenum,//设置默认被选中的分页

// 6.7新增额外的属性
// count总条目输区域  prev 上一页区域 next下一页区域 page分页区域 limit条目选项区域 skip快捷的跳转区域
layout:["count","limit","prev","page","next","skip"],
limits:[2,3,5,10,15],//每页显示的选择项

    // 6.4 实现分页变化显示对应表格数据 
    // 分页发生切换 触发jump回调函数
    jump:function (obj,first) {
        // console.log(first);
        // console.log(obj.curr);
    // 6.5拿到切换最新的页码值 
        q.pagenum = obj.curr;

// 6.8 切换条目 触发jump回调 通过obj.limit拿到最新的条目数 赋值给q.pagesize
q.pagesize = obj.limit;

        // 调用jump回调的方式有两种：
// 1点击页码的时候 ，会触发jump回调
// 2只要调用了laypage.render()方法，就会触发jump回调 
// 第2中调用时死循环原因：获取文章列表里initTable() 调用renderPage 不断的调用laypage.render 就会再次调用initTable() 反复循环会死循环
    // 解决死循环方法 jump传个参数first 如果为true 就是第二种调用 不执行initTable() false执行initTable
// 6.6根据页码值重新发请求渲染表格 直接调用initTable(); 
if(!first){
    initTable();

}        
    }

    })


}


// 7.1通过代理的形式，为删除按钮绑定点击事件处理函数

$('tbody').on('click', '.btn-delete',function(){

// 7.4获取删除按钮的个数
var len = $('.btn-delete').length;

    // 7.3获取文章的id
var id = $(this).attr('data-id');
// console.log('ok');
// 7.2询问用户是否要删除数据
layer.confirm('is not?', {icon: 3, title:'提示'}, function(index){
    //do something
    $.ajax({
        method: 'GET',
        url:'/my/article/delete/' + id,
        success:function(res){
            if(res.status !==0){
                return layer.msg('删除文章失败!');

            }
            layer.msg('删除文章成功!');
            // 7.5数据删除完成后 判断是否还有剩余的 如果有 页码就减一  没有就不再请求数据
           if(len ===1) {
            //    如果为1 删除完就没数据了 页码值最小值为1
            q.pagenum = q.pagenum === 1 ? 1 : q.pagenum -1;

           }
           
            // 7.6重新加载表格里的数据
            initTable();
        }
    })
    layer.close(index);
  });
})
});
